<template>
  <ADrawer v-bind="$attrs" rootClassName="drawer-pro-container" :closable="false">
    <template v-if="props.closable === true" #extra>
      <AButton class="drawer-pro-close" type="text" :icon="h(CloseOutlined)" @click="$attrs.onClose"></AButton>
    </template>
    <slot></slot>
  </ADrawer>
</template>

<script setup>
import { h } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  closable: { type: Boolean, default: true }
});
</script>

<style lang="scss">
.drawer-pro-container .ant-drawer-content {
  position: relative;

  .ant-drawer-header .ant-drawer-header-title .ant-drawer-title {
    width: 100%;
    padding-right: 20%;
    // 换行
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 设置最多显示3行
  }

  .drawer-pro-close {
    top: 12px;
    right: 16px;
    position: absolute;
  }

  .ant-drawer-body {
    padding: 0;
    overflow: hidden;
  }
}
</style>
